// src/components/NewAdvancedCard/NewAdvancedCard.tsx
import React from 'react';
import './NewAdvancedCard.css';

interface xiangqingAdvancedCardProps {
  app: {
    title: string;
    description: string;
    date: string;
    views: string;
    likes: string;
    comments: number;
    username: string;
    tags: string[];
    image: string;
    link: string;
  };
}

const NewAdvancedCard: React.FC<xiangqingAdvancedCardProps> = ({app}) => {
  return (
    <div className="new-advanced-card" >
      <div className="new-advanced-card-header">
        <img src={app.image} alt={app.title} className="new-advanced-card-image" />
        <h2 className="new-advanced-card-title">{app.title}</h2>
        <button className="new-advanced-card-download-button">立即体验</button>
      </div>
      <div className="new-advanced-card-tags">
        {app.tags.map((tag, index) => (
          <span key={index} className="new-advanced-card-tag">{tag}</span>
        ))}
      </div>
      <div className="new-advanced-card-meta">
        <span className="new-advanced-card-meta-info">模型ID： am-vbhja8njfu9</span>
        <span className="new-advanced-card-meta-info">版本数量：5</span>
      </div>
    </div>
  );
};

export default NewAdvancedCard;
